﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>视频播放器</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text/css" href="/static/css/video.css">
    <link href="/static/css/ccp/scojs.css" rel="stylesheet">
    <link href="/static/css/ccp/colpick.css" rel="stylesheet">
    <link href="/static/css/ccp/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/ccp/main.css">
    <style type="text/css">
        .outsitepanel {display: none !important; }
    </style>
</head>
<body>
<section class="public_width">
    <dl class="video_con">
        <figure class="video_con_show tab">
            <div class="video_bofang tab-box">
                <dt class="video_con_title" ><b style="font-size: 30px;">视频标题：</b><span id="video_con_title" th:text="${lession.lessionTitle}"></span></dt>
               <div id="danmup" style="float: left;" ></div>
                <div style="display: none">
                    <span class="glyphicon" aria-hidden="true">&#xe072</span>
                    <span class="glyphicon" aria-hidden="true">&#xe073</span>
                    <span class="glyphicon" aria-hidden="true">&#xe242</span>
                    <span class="glyphicon" aria-hidden="true">&#xe115</span>
                    <span class="glyphicon" aria-hidden="true">&#xe111</span>
                    <span class="glyphicon" aria-hidden="true">&#xe096</span>
                    <span class="glyphicon" aria-hidden="true">&#xe097</span>
                </div>
            </div>

            <figcaption class="video_show_zs">
                <div class="video_show_zj">
                    <p class="video_show_zj_js">
                        <b class="video_show_zj_name">标题</b>
                        <span class="video_show_zj_zc" th:text="${lession.lessionTitle}"></span>
                    </p>
                </div>
                <span class="video_show_title">播放列表</span>
                <div role="tabpanel" class="tab-pane active" id="catalo">
                    <div class="lab-item" th:each="lession,catalogStat : ${catalog}" style="color: white">
                        <div class="lab-item-index" th:onclick="'javascript:lookVideo('+${lession.lessionId}+');'">第
                            <span th:text="${catalogStat.index+1}"></span> 节
                            &nbsp;&nbsp;<span class="cat" th:text="${lession.lessionTitle}"></span>
                        </div>
                    </div>
                </div>

            </figcaption>
        </figure>
    </dl>

</section>
<script src="/static/js/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/sjhref.js"></script>
<script src="/static/js/ccp/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="/static/js/ccp/jquery.shCircleLoader.js" type="text/javascript"></script>
<script src="/static/js/ccp/sco.tooltip.js" type="text/javascript"></script>
<script src="/static/js/ccp/colpick.js" type="text/javascript"></script>
<script src="/static/js/ccp/jquery.danmu.js" type="text/javascript"></script>
<script src="/static/js/ccp/main.js" type="text/javascript"></script>

<script type="text/javascript">

    /*查看视频*/
    function lookVideo(obj) {

        $.ajax({
            type: "POST",
            url:"/lession/getVideo?lessionId="+obj+"&courseId="+[[${course.courseId}]],//请求页面
            data: 'lession',
            dataType: "json",
            complete:function(){
                location.href ="/lession/getVideo?lessionId="+obj+"&courseId="+[[${course.courseId}]]
            }//跳转页面
        });
    }

    $("#danmup").DanmuPlayer({
        src:"/static/video/[[${lession.lessionVideo}]]",
        height: "512px", //区域的高度
        width: "900px", //区域的宽度
        urlToGetDanmu:"/danmu/receiveDanmup?id="+[[${lession.lessionId}]],//用来接收弹幕信息的url
        urlToPostDanmu:"/danmu/sendDanmup?id="+[[${lession.lessionId}]], // 用来发送弹幕信息的url
    });

    $("#danmup.danmu-div").danmu("addDanmu",[
        { "text":"这是滚动弹幕" ,color:"white",size:1,position:0,time:2}
        ,{ "text":"我是帽子绿" ,color:"green",size:1,position:0,time:3}
        ,{ "text":"哈哈哈啊哈" ,color:"black",size:1,position:0,time:10}
        ,{ "text":"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:3}
        ,{ "text":"这是底部弹幕" , color:"red" ,size:1,position:2,time:9}
        ,{ "text":"大家好，我是伊藤橙" ,color:"orange",size:1,position:1,time:3}

    ])
</script>
</body>
</html>